<template>
    <!--    目标对象不存在子元素，是menu-item-->
    <template v-if="item.children === undefined || item.children === null || item.children.length === 0">
        <el-menu-item :index="item.path">
            <template v-if="item.iconUrl">
                <img :src="`/${item.iconUrl}`" class="menu-icon">
            </template>
            {{item.name}}
        </el-menu-item>
    </template>
    <!--    目标对象存在子元素，是sub-menu-->
    <template v-else>
        <el-sub-menu :index="index + ''">
            <template #title>
                <template v-if="item.iconUrl">
                    <img :src="`/${item.iconUrl}`" class="menu-icon">
                </template>
                {{item.name}}
            </template>
            <template v-for="(item2,index2) in item.children">
                <menu-item :item="item2" :index="index + '-' + index2"/>
            </template>
        </el-sub-menu>
    </template>
</template>

<script>
export default {
    name: "MenuItem",
    props: ['item','index'],
}
</script>

<style>
.menu-icon{
    width: 24px;
    margin-right: 10px;
}
/*1520 + 721*/
.el-menu-item{
    width: 100%;
}
.el-sub-menu{
    width: 100%;
}
</style>